<template>
<div>
  <div class="goods-list">
      <div class="goods-item" v-for="(item,i) in list" :key="i" @click="goInfo(item.id)">
          <img :src="item.img_url">
          <h1 class="title">{{item.title}}</h1>
          <div class="info">
              <p class="price">
                  <span class="now">￥{{item.sell_price}}</span>
                  <span class="old">￥{{item.market_price}}</span>
              </p>
              <p class="sell">
                  <span>热卖中</span>
                  <span>剩{{item.stock_quantity}}件</span>
              </p>
          </div>
      </div>
  </div>
  <mt-button type="danger" @click="more">加载更多</mt-button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            pageindex: 1, //分页的页数
            list: [] //商品列表
        }
    },
    created(){
        this.getgoodslist()
    },
    methods: {
        getgoodslist(){  //获取商品列表
            this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result=>{
                if(result.body.status == 0){
                    //数组的concat方法用于连接多个数组
                    this.list = this.list.concat(result.body.message)
                }
            })
            
        },
        more(){ //加载更多
            this.pageindex++ //页数加1
           this.getgoodslist()
        },
        goInfo(id){ //编程式跳转
            this.$router.push({name: "GoodsInfo",params: {id}})
        }
    }
}
</script>

<style scoped>

.goods-list {
    background-color: #fff;
    display: flex;  
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;
}
.goods-item {
    width: 49%;
    border: 1px solid #ccc;
    margin-bottom: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 283px
}
img {
    width: 100%
}
.title {
    font-size: 14px;
    
}
.info {
    padding: 5px 0;
   border: 1px solid #ccc;
   background-color: #ccc;
}
.now {
    color: red;
    font-weight: 700
}
.old {
    text-decoration: line-through;
    margin-left: 10px
}
.sell {
    display: flex;
    justify-content: space-between;
}
button {
    display: block;
    width: 100%
}
    
</style>

